<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}

.leftButton {
  position: absolute;
  top: 51%;
  transform: translateY(-51%);
}

.el-button.is-circle {
  border-radius: 0%;
}

.el-button--mini.is-circle {
  padding: 4px;
}

.rule_tree_root {
  width: 25px;
  display: flex;
  /*margin: 20px 10px;*/
}

.rule_tree {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 40px;
  margin-right: 0px;
}

.rule_tree_top {
  width: 90%;
  top: 15px;
  position: relative;
  flex-grow: 2;

  margin-left: 11px;
  margin-bottom: 15px;

  border-radius: 1px;
  border-left: 1px solid #d3dce6;
  border-top: 1px solid #d3dce6;
  border-bottom: 1px solid #d3dce6;
}

.rule_tree_bottom {
  width: 100%;
  bottom: 15px;
  position: relative;
  /*flex-grow: 2;*/

  margin-left: 16px;
  margin-top: 15px;

  border-left: 1px solid #d3dce6;
  border-radius: 1px;
  /*border-bottom: 1px solid #d3dce6;*/
}

</style>
<template>
  <div>
    <div v-if="showSelf">
      <el-row :class="'rule_tree_root'">
        <el-col class="rule_tree">
          <rule-tree-node
            style="text-align: left;"
            :root-list="this"
            :relation-model="relationModel"
            :selectors="selectors"
            :root="true"
          >
          </rule-tree-node>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>

import ruleTreeNode from "./ruleTreeNode";

export default {
  name: "ruleTreeList",
  filters: {},
  props: [],
  components: {
    ruleTreeNode
  },
  data() {
    return {
      showSelf: false,
      selectors: {},
      relationModel: []
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      let relationModel = data.relationModel;
      let usedNodeSet = new Set()
      vm.getAllNodeUuids(relationModel, usedNodeSet)
      for (let i = 0; i < data.selectors.nodeOptions.length; i++) {
        let nodeOption = data.selectors.nodeOptions[i];
        nodeOption.disabled = usedNodeSet.has(nodeOption.value);
      }

      vm.selectors = data.selectors
      vm.relationModel = relationModel
      vm.showSelf = true
    },
    getRelationModel() {
      return this.relationModel
    },
    getAllNodeUuids(relationModel, usedNodeSet) {
      let vm = this
      if (!relationModel || relationModel.length === 0) {
        return
      }
      for (let i = 0; i < relationModel.length; i++) {
        usedNodeSet.add(relationModel[i].sourceNodeUuid)
        usedNodeSet.add(relationModel[i].targetNodeUuid)
        vm.getAllNodeUuids(relationModel[i].children, usedNodeSet)
      }
    },
    refreshNodeSelectors(nodeOptions) {
      let vm = this
      vm.selectors.nodeOptions = nodeOptions
      vm.$forceUpdate()
    }
  }
}
</script>
